<template>
    <section class="List-container wrapper">

        <el-row v-loading="loading" :element-loading-text="loadingText">
            <el-col :span="4" class="box tree">
                <tree @clickNode="clickNode" ref="treeComponent"></tree>
            </el-col>
            <el-col :span="20" class="box list">
                <div class="filter-wrapper">
                    <el-button type="primary" size="medium" icon="el-icon-plus" @click="handleCreate">添加菜单</el-button>
                    <el-button type="primary" size="medium" icon="el-icon-refresh" @click="handleReloadList">刷新</el-button>
                    <el-button type="primary" size="medium" icon="el-icon-upload" @click="handlePushMenu">推送菜单</el-button>
                </div>

                <el-table
                        :data="list"
                        border fit
                        highlight-current-row
                        v-loading="listLoading"
                        element-loading-text="给我一点时间"
                        @selection-change="handleSelectionChange"
                        class="margin-bottom-10">

                    <el-table-column
                            type="selection"
                            width="55" align="center">
                    </el-table-column>
                    <el-table-column type="index" width="55" align="center"></el-table-column>

                    <el-table-column label="菜单名称" align="center">
                        <template slot-scope="scope"> {{scope.row.name}} </template>
                    </el-table-column>

                    <el-table-column label="按钮类型" align="center">
                        <template slot-scope="scope"> {{scope.row.type}} </template>
                    </el-table-column>

                    <el-table-column label="跳转URL" align="center">
                        <template slot-scope="scope"> {{scope.row.url}} </template>
                    </el-table-column>

                    <el-table-column label="APPID" align="center">
                        <template slot-scope="scope"> {{scope.row.appid}} </template>
                    </el-table-column>

                    <el-table-column label="状态" width="80px" align="center">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
                            <el-tag type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="排序" width="80px" align="center">
                        <template slot-scope="scope"> {{scope.row.orders}} </template>
                    </el-table-column>

                    <el-table-column label="关联内容" align="center">
                        <template slot-scope="scope">
                            <el-tag type="primary" v-if="scope.row.templateType === 'text'">文本内容</el-tag>
                            <el-tag type="primary" v-if="scope.row.templateType === 'article'">图文内容</el-tag>
                            <el-tag type="primary" v-if="scope.row.templateType === 'articles'">多图文内容</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180px" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" icon="edit" @click="handleUpdate(scope.row)">编辑</el-button>

                            <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>

    </section>
</template>

<script>
    import { selectList, deleted, pushMenuToWeiXin } from '@/api/weixin/menu'
    import Tree from "./Tree";

    export default {
        components: {Tree},
        name: 'List',
        data() {
            return {
                list: [],
                loading: false,
                loadingText: '拼命加载中',
                listLoading: false,
                listQuery: {
                    pid: null
                },
                multipleSelection: null
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            handleCreate() {
                this.$router.push({path: 'form'})
            },
            handleUpdate(row) {
                this.$router.push({path: 'form', query: {'menuId': row.id}})
            },
            handleSelectionChange(val) {//多选
                this.multipleSelection = val;
            },
            getTableData() {
                this.listLoading = true
                selectList(this.listQuery).then(response => {
                    this.list = response.data
                    this.listLoading = false
                }).catch(error => {
                    console.log(error)
                    this.listLoading = false
                })
            },
            handleReloadList() {
                this.listQuery.pid = null
                this.getTableData()
            },
            clickNode(node) {//子组件调用父组件方法
                if(node.childNodes.length > 0) {
                    this.listQuery.pid = node.data.id
                    this.getTableData()
                } else {//编辑
                    this.$router.push({path: 'form', query: {'menuId': node.data.id}})
                }
            },
            handleDelete(row) {//删除数据
                this.$confirm('确定要删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleted(row.id).then(response => {
                        if(response.data.status) {
                            this.$notify({
                                title: '成功', message: response.data.message,
                                type: 'success', duration: 2000
                            })
                            this.getTableData()
                            this.$refs.treeComponent.handleReload()
                        } else {
                            this.$notify({
                                title: '发生错误', message: response.data.message,
                                type: 'error', duration: 2000
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({ type: 'warning', message: '已取消删除' })
                })
            },

            handlePushMenu() {  //推送菜单到微信
                this.loadingText = '推送中，请稍等...'
                this.loading = true
                pushMenuToWeiXin().then(response => {
                    if(response.data.status) {
                        this.$notify({
                            title: '推送成功', message: response.data.message,
                            type: 'success', duration: 2000
                        })
                    } else {
                        this.$notify({
                            title: '发生错误', message: response.data.message,
                            type: 'error', duration: 2000
                        })
                    }
                    this.loading = false
                })
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .wrapper{
        border: 1px solid #e9eaec;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        .box{
            &:last-child{
                border-left: 1px solid #d4dde2;
            }
        }
        .tree{

        }
        .list{
            padding: 0 10px;
            .filter-wrapper{
                line-height: 50px;
            }
        }
    }

</style>